<template>
  <div class="pool-join-container">
    <!-- 顶部导航 -->
    <div class="nav-header">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <div class="header-title">参与分红</div>
    </div>

    <!-- 主要内容 -->
    <div class="content-container">
      <div class="steps-and-content">
        <!-- 左侧步骤 -->
        <div class="steps-container">
          <div class="steps-title">参与步骤</div>
          
          <div class="steps-list">
            <div 
              class="step-item"
              :class="{ 'active': activeStep === 1 }"
              @click="handleStepClick(1)"
            >
              <div class="step-number">1</div>
              <span>分红池</span>
            </div>
            
            <div 
              class="step-item"
              :class="{ 'active': activeStep === 2 }"
              @click="handleStepClick(2)"
            >
              <div class="step-number">2</div>
              <span>健康设备</span>
            </div>
            
            <div 
              class="step-item"
              :class="{ 'active': activeStep === 3 }"
              @click="handleStepClick(3)"
            >
              <div class="step-number">3</div>
              <span>特权VIP</span>
            </div>
            
            <div 
              class="step-item"
              :class="{ 'active': activeStep === 4 }"
              @click="handleStepClick(4)"
            >
              <div class="step-number">4</div>
              <span>健康挖矿</span>
            </div>
          </div>
        </div>
        
        <!-- 右侧内容 -->
        <div class="content-area">
          <!-- 步骤1：分红池介绍 -->
          <div v-if="activeStep === 1" class="step-content">
            <div class="content-card">
              <h2 class="card-title">分红池介绍</h2>
              
              <div class="dividend-pool-card">
                <div class="pool-label">当前分红池</div>
                <div class="pool-amount">{{ dividendPoolInfo.totalAmount }} {{ dividendPoolInfo.currency }}</div>
                <div class="pool-stats">
                  <div class="stat-item">
                    <div class="stat-label">现在参与预计可得</div>
                    <div class="stat-value">{{ dividendPoolInfo.estimatedDividend }} {{ dividendPoolInfo.currency }}</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-label">昨日分红</div>
                    <div class="stat-value">{{ dividendPoolInfo.yesterdayDividend }} {{ dividendPoolInfo.currency }}/人</div>
                  </div>
                </div>
              </div>
              
              <div class="rules-section">
                <h3 class="section-title">分红规则</h3>
                <p class="rule-text">
                  每日运用首页的10%用来奖励分红，分红结算方式为T+1。每日0点开始计算并打款操作。
                </p>
                <p class="rule-text">
                  分红池资金来源于平台交易手续费、广告收入和其他运营收入的一部分，旨在回馈平台用户。
                </p>
                <p class="rule-text">
                  只有成为VIP会员才能参与分红，分红金额根据当日分红池总额和参与分红的用户数量计算。
                </p>
              </div>
              
              <van-button 
                type="primary" 
                block 
                class="next-button"
                @click="handleStepClick(2)"
              >
                下一步 <van-icon name="arrow" class="next-icon" />
              </van-button>
            </div>
          </div>
          
          <!-- 步骤2：购买手表 -->
          <div v-if="activeStep === 2" class="step-content">
            <div class="content-card">
              <h2 class="card-title">购买手表</h2>
              
              <div class="product-image-container">
                <img 
                  :src="productInfo.image"
                  :alt="productInfo.name" 
                  class="product-image"
                />
                <div class="product-overlay">
                  <div class="product-name">{{ productInfo.name }}</div>
                  <div class="product-features">健康监测 | 数据挖矿 | 智能助手</div>
                </div>
              </div>
              
              <div class="product-price-row">
                <div class="price-info">
                  <div class="price-label">价格</div>
                  <div class="price-amount">{{ productInfo.price }} USDT</div>
                </div>
                <van-button 
                  type="primary" 
                  @click="goToProductDetail"
                >
                  立即购买
                </van-button>
              </div>
              
              <div class="product-features-card">
                <h3 class="features-title">产品特点</h3>
                <ul class="features-list">
                  <li v-for="(feature, index) in productInfo.features" :key="index">• {{ feature }}</li>
                </ul>
              </div>
              
              <p class="product-note">
                购买BTDapp智能手表是参与分红的必要条件。手表不仅是健康管理的得力助手，还是数据挖矿的重要工具。
              </p>
              
              <div class="navigation-buttons">
                <van-button 
                  plain 
                  type="primary" 
                  class="prev-button"
                  @click="handleStepClick(1)"
                >
                  上一步
                </van-button>
                <van-button 
                  type="primary" 
                  class="next-button"
                  @click="handleStepClick(3)"
                >
                  下一步 <van-icon name="arrow" class="next-icon" />
                </van-button>
              </div>
            </div>
          </div>
          
          <!-- 步骤3：成为VIP -->
          <div v-if="activeStep === 3" class="step-content">
            <div class="content-card">
              <h2 class="card-title">成为VIP</h2>
              
              <div class="vip-image-container" @click="goToVip">
                <img 
                  src="https://images.unsplash.com/photo-1634084462412-b54873c0a56d?q=80&w=1000&auto=format&fit=crop"
                  alt="VIP会员" 
                  class="vip-image"
                />
                <div class="vip-overlay">
                  <div class="vip-title">VIP会员特权</div>
                  <div class="vip-subtitle">点击查看详情</div>
                </div>
              </div>
              
              <div class="vip-status-card">
                <div class="status-icon">
                  <van-icon name="checked" />
                </div>
                <div class="status-info">
                  <div class="status-title">VIP激活成功</div>
                  <div class="status-desc">您已成功激活VIP会员，可以享受所有VIP特权</div>
                </div>
              </div>
              
              <div class="vip-benefits">
                <div class="benefit-item">
                  <div class="benefit-icon gold">
                    <van-icon name="gold-coin" />
                  </div>
                  <div class="benefit-text">永久享受运用分红权利</div>
                </div>
                
                <div class="benefit-item">
                  <div class="benefit-icon blue">
                    <van-icon name="balance-o" />
                  </div>
                  <div class="benefit-text">提现转账手续费永久5折</div>
                </div>
                
                <div class="benefit-item">
                  <div class="benefit-icon purple">
                    <van-icon name="friends" />
                  </div>
                  <div class="benefit-text">邀请奖励</div>
                </div>
              </div>
              
              <van-button 
                plain 
                type="primary" 
                block 
                class="vip-details-button"
                @click="goToVip"
              >
                查看VIP特权详情
              </van-button>
              
              <div class="navigation-buttons">
                <van-button 
                  plain 
                  type="primary" 
                  class="prev-button"
                  @click="handleStepClick(2)"
                >
                  上一步
                </van-button>
                <van-button 
                  type="primary" 
                  class="next-button"
                  @click="handleStepClick(4)"
                >
                  下一步 <van-icon name="arrow" class="next-icon" />
                </van-button>
              </div>
            </div>
          </div>
          
          <!-- 步骤4：挖矿 -->
          <div v-if="activeStep === 4" class="step-content">
            <div class="content-card">
              <h2 class="card-title">挖矿</h2>
              
              <div class="mining-image-container" @click="goToMining">
                <img 
                  src="https://images.unsplash.com/photo-1621504450181-5d356f61d307?q=80&w=1000&auto=format&fit=crop"
                  alt="数据挖矿" 
                  class="mining-image"
                />
                <div class="mining-overlay">
                  <div class="mining-title">数据挖矿</div>
                  <div class="mining-subtitle">点击查看详情</div>
                </div>
              </div>
              
              <div class="mining-profits-card">
                <h3 class="profits-title">挖矿收益</h3>
                <div class="profit-row">
                  <div class="profit-label">日收益率</div>
                  <div class="profit-value">0.5%</div>
                </div>
                <div class="profit-row">
                  <div class="profit-label">月收益率</div>
                  <div class="profit-value">15%</div>
                </div>
                <div class="profit-row">
                  <div class="profit-label">年收益率</div>
                  <div class="profit-value">182.5%</div>
                </div>
              </div>
              
              <p class="mining-description">
                通过佩戴BTDapp智能手表，您可以在日常生活中自动收集健康数据并贡献给平台，从而获得HDFS奖励。这些数据经过匿名化处理，将用于健康研究和分析。
              </p>
              
              <van-button 
                type="primary" 
                block 
                class="mining-button"
                @click="goToMining"
              >
                立即参与挖矿
              </van-button>
              
              <div class="navigation-buttons">
                <van-button 
                  plain 
                  type="primary" 
                  class="prev-button"
                  @click="handleStepClick(3)"
                >
                  上一步
                </van-button>
                <van-button 
                  type="success" 
                  class="finish-button"
                  @click="goToHome"
                >
                  完成
                </van-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showLoadingToast, closeToast } from 'vant'
import { dividend, goods } from '@/api'

const router = useRouter()
const activeStep = ref(1)

// 分红池数据
const dividendPoolInfo = ref({
  totalAmount: '0',
  estimatedDividend: '0',
  yesterdayDividend: '0',
  participantsCount: 0,
  currency: 'USDT'
})

// 商品数据
const productInfo = ref({
  id: '1001',
  name: 'BTDapp 智能手表',
  price: '1299',
  image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=1000&auto=format&fit=crop',
  features: ['高精度健康监测传感器', '7天超长续航', '防水防尘设计', '支持数据挖矿功能', '自动同步健康数据']
})

// 获取分红池数据
const fetchDividendPoolData = async () => {
  try {
    showLoadingToast({
      message: '加载中...',
      forbidClick: true,
    })
    
    const response = await dividend.getDividendPoolInfo()
    if (response && response.data) {
      dividendPoolInfo.value = response.data
    }
  } catch (error) {
    console.error('获取分红池数据失败:', error)
    // 设置默认值
    dividendPoolInfo.value = {
      totalAmount: '10',
      estimatedDividend: '0.01',
      yesterdayDividend: '0.5',
      participantsCount: 156,
      currency: 'USDT'
    }
  } finally {
    closeToast()
  }
}

// 获取商品数据
const fetchProductData = async () => {
  try {
    // 获取商品列表，只获取一个商品
    const response = await goods.getGoodsList({
      page: 1,
      size: 1,
      count: false
    })
    
    // 检查响应数据结构
    const goodsData = response.data.list || response
    
    if (goodsData && Array.isArray(goodsData) && goodsData.length > 0) {
      const item = goodsData[0]
      
      // 获取第一个规格的价格，如果没有规格则为0
      const price = item.specs && item.specs.length > 0 
        ? item.specs[0].usdtPrice 
        : '1299'
      
      // 获取第一张图片，如果有多张图片用逗号分隔
      const imageUrl = item.images 
        ? item.images.split(',')[0] 
        : 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=1000&auto=format&fit=crop'
      
      productInfo.value = {
        id: item.id.toString(),
        name: item.productName || 'BTDapp 智能手表',
        price: price,
        image: imageUrl,
        description: item.detail || '',
        features: ['高精度健康监测传感器', '7天超长续航', '防水防尘设计', '支持数据挖矿功能', '自动同步健康数据']
      }
    }
  } catch (error) {
    console.error('获取商品数据失败:', error)
    // 保留默认值
  }
}

// 导航方法
const goBack = () => {
  router.back()
}

const handleStepClick = (step) => {
  activeStep.value = step
}

const goToVip = () => {
  router.push('/vip')
}

const goToMining = () => {
  router.push('/mining')
}

const goToProductDetail = () => {
  router.push(`/product/${productInfo.value.id}`)
}

const goToHome = () => {
  router.push('/')
}

// 在页面加载时获取数据
onMounted(() => {
  fetchDividendPoolData()
  fetchProductData()
})
</script>

<style scoped>
.pool-join-container {
  min-height: 100vh;
  background-color: white;
  padding-bottom: 24px;
}

/* 顶部导航 */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 44px;
  background-color: white;
  max-width: 800px;
  margin: 0 auto;
  z-index: 100;
  padding: 0 16px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.back-button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  margin-left: 12px;
}

/* 主要内容 */
.content-container {
  padding: 60px 16px 16px;
  max-width: 800px;
  margin: 0 auto;
}

.steps-and-content {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .steps-and-content {
    flex-direction: row;
    gap: 16px;
  }
  
  .steps-container {
    width: 33.333%;
  }
  
  .content-area {
    width: 66.667%;
  }
}

/* 左侧步骤 */
.steps-container {
  margin-bottom: 16px;
}

.steps-title {
  font-size: 14px;
  font-weight: 500;
  color: #323233;
  margin-bottom: 12px;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background-color: #f5f7fa;
  color: #323233;
  cursor: pointer;
  transition: all 0.3s;
}

.step-item:hover {
  background-color: #e8eaed;
}

.step-item.active {
  background-color: #1989fa;
  color: white;
}

.step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: white;
  color: #1989fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  margin-right: 12px;
}

/* 右侧内容 */
.content-area {
  flex: 1;
}

.step-content {
  height: 100%;
}

.content-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  height: 100%;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #323233;
}

/* 步骤1：分红池介绍 */
.dividend-pool-card {
  background: linear-gradient(135deg, #1989fa, #0960c5);
  border-radius: 8px;
  padding: 16px;
  color: white;
  margin-bottom: 16px;
}

.pool-label {
  font-size: 14px;
  margin-bottom: 4px;
}

.pool-amount {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.pool-stats {
  display: flex;
  justify-content: space-between;
}

.stat-label {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 15px;
  font-weight: 500;
}

.rules-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #323233;
}

.rule-text {
  font-size: 14px;
  color: #646566;
  margin-bottom: 12px;
  line-height: 1.5;
}

.rule-text:last-child {
  margin-bottom: 0;
}

.next-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1989fa !important;
  border: none !important;
  font-weight: 500;
}

.next-icon {
  margin-left: 4px;
}

/* 步骤2：购买手表 */
.product-image-container {
  position: relative;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 16px;
}

.product-name {
  color: white;
  font-size: 16px;
  font-weight: 500;
}

.product-features {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

.product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.price-label {
  font-size: 13px;
  color: #969799;
}

.price-amount {
  font-size: 20px;
  font-weight: 700;
  color: #1989fa;
}

.product-features-card {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.features-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #323233;
}

.features-list {
  font-size: 13px;
  color: #646566;
  line-height: 1.6;
  padding-left: 4px;
}

.product-note {
  font-size: 13px;
  color: #969799;
  margin-bottom: 24px;
  line-height: 1.5;
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
}

.prev-button {
  border-color: #1989fa !important;
  color: #1989fa !important;
}

/* 步骤3：成为VIP */
.vip-image-container {
  position: relative;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  cursor: pointer;
}

.vip-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vip-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 16px;
}

.vip-title {
  color: white;
  font-size: 20px;
  font-weight: 700;
}

.vip-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

.vip-status-card {
  display: flex;
  align-items: center;
  background-color: #ecf9eb;
  border: 1px solid #d1f2cf;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.status-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #07c160;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 20px;
}

.status-title {
  font-size: 15px;
  font-weight: 500;
  color: #07c160;
  margin-bottom: 4px;
}

.status-desc {
  font-size: 13px;
  color: #18a058;
}

.vip-benefits {
  margin-bottom: 16px;
}

.benefit-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.benefit-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
}

.benefit-icon.gold {
  background-color: #ffefd1;
  color: #ff9500;
}

.benefit-icon.blue {
  background-color: #e0f2ff;
  color: #1989fa;
}

.benefit-icon.purple {
  background-color: #f2e3ff;
  color: #8c6ff7;
}

.benefit-text {
  font-size: 14px;
  color: #323233;
}

.vip-details-button {
  margin-bottom: 24px;
  border-color: #1989fa !important;
  color: #1989fa !important;
}

/* 步骤4：挖矿 */
.mining-image-container {
  position: relative;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  cursor: pointer;
}

.mining-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mining-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 16px;
}

.mining-title {
  color: white;
  font-size: 20px;
  font-weight: 700;
}

.mining-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

.mining-profits-card {
  background-color: #e0f2ff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.profits-title {
  font-size: 16px;
  font-weight: 500;
  color: #0960c5;
  margin-bottom: 12px;
}

.profit-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.profit-row:last-child {
  margin-bottom: 0;
}

.profit-label {
  font-size: 14px;
  color: #646566;
}

.profit-value {
  font-size: 14px;
  font-weight: 500;
  color: #1989fa;
}

.mining-description {
  font-size: 14px;
  color: #646566;
  line-height: 1.5;
  margin-bottom: 16px;
}

.mining-button {
  margin-bottom: 24px;
  background-color: #1989fa !important;
  border: none !important;
  font-weight: 500;
}

.finish-button {
  background-color: #07c160 !important;
  border: none !important;
  font-weight: 500;
}
</style>